
import { inject, observer } from 'mobx-react';
import React from 'react';
import { WeaTop, WeaLocaleProvider, WeaTab, WeaNewScroll, WeaDialog, WeaRightMenu } from 'ecCom';
import { Button } from 'antd';
import { WeaTableNew } from 'comsMobx';
import SendFormComponent from './../components/SendFormComponent';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('recDocManageStore')
@observer
export default class Demo extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const recDocManageStore = this.props.recDocManageStore;
    recDocManageStore.getSearchForm();
    recDocManageStore.getTableList();
    recDocManageStore.getReason();
  }
  componentWillUnmount() {
    const { recDocManageStore } = this.props;
    recDocManageStore.setSelectedRowKeys();
  }
  // 重新定义列
  getColumns = (columns) => {
    const recDocManageStore = this.props.recDocManageStore;
    return columns.map((col) => {
      if (col.dataIndex == 'document_title') {
        return {
          ...col,
          title: col.title,
          render: (text, record) => (
            <a style={{ color: '#4d7ad8' }} onClick={() => recDocManageStore.checkDetails(record)}>{text}</a>
          ),
        };
      } if (col.dataIndex == 'docimagefileid' || col.dataIndex == 'attachimagefileids') {
        return {
          ...col,
          display: false,
          title: col.title,
          render: text => (
            text
          ),
        };
      }
      return col;
    });
  }
  // 获取搜索的form表单
  getSearchForm() {
    const { recDocManageStore } = this.props;
    return (
      <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@fo50ba`} ref="scroll" className="searchForm">
        {recDocManageStore.searchForm.render({ needTigger: true }, {
          onEnterSearch: () => recDocManageStore.getTableList(),
        })}
      </WeaNewScroll>
    );
  }
  // 获取查看公文弹窗的按钮
  getcheckDocInfoButton() {
    const { recDocManageStore } = this.props;
    let docInfoButtons = [<button style={{ display: 'none' }} />];
    recDocManageStore.reciveStatus == 'receipted' && docInfoButtons.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1j9hy9@download`} type="primary" onClick={() => recDocManageStore.onOperatesClick('', '', '', '3')}>{getLabel(387955, '下载正文')}</Button>,
      // <Button type="primary" onClick={() => recDocManageStore.onOperatesClick("", "", "", "4")}>{getLabel(22629, "下载附件")}</Button>,
    );
    recDocManageStore.reciveStatus == 'unreceipted' && docInfoButtons.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kz8by2@sign`} type="primary" onClick={() => recDocManageStore.onOperatesClick('', '', '', '0')} >{getLabel(20569, '签收')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kewo1b@reject`} type="primary" onClick={() => recDocManageStore.onOperatesClick('', '', '', '1')} >{getLabel(23048, '拒收')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ff4aqi@backOut`} type="primary" onClick={() => recDocManageStore.onOperatesClick('', '', '', '2')} >{getLabel(129829, '退回')}</Button>,
    );
    return docInfoButtons;
  }
  // 获取批量处理的按钮
  getBatchButton() {
    const { recDocManageStore } = this.props;
    const length = recDocManageStore.selectedRowKeys.length;
    const btns = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@td2c11@batchSign`} type="primary" disabled={length === 0} onClick={() => recDocManageStore.onOperatesClick('', '', '', '0')}>{getLabel(387687, '批量签收')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bi15u7@batchReject`} type="primary" disabled={length === 0} onClick={() => recDocManageStore.onOperatesClick('', '', '', '1')}>{getLabel(387688, '批量拒收')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vewjsp@BatchBackOut`} type="primary" disabled={length === 0} onClick={() => recDocManageStore.onOperatesClick('', '', '', '2')}>{getLabel(83423, '批量退回')}</Button>,
    ];
    return btns;
  }

  // 获取右键菜单
  getRightMenu() {
    const { recDocManageStore } = this.props;
    const { selectedKey, onOperatesClick, selectedRowKeys, getTableList } = recDocManageStore;
    const length = selectedRowKeys.length;
    const disabled = length === 0;
    const rightMenuDatas = [{
      key: '1',
      disabled: false,
      icon: <i className="icon-coms-search" />,
      content: getLabel('388113', '搜索'),
      onClick: () => getTableList(),
    }];
    if (selectedKey == '0') {
      rightMenuDatas.push({
        key: '2',
        disabled,
        icon: <i className="icon-coms-delete" />,
        content: getLabel('387687', '批量签收'),
        onClick: () => onOperatesClick('', '', '', '0'),
      }, {
        key: '3',
        disabled,
        icon: <i className="icon-coms-delete" />,
        content: getLabel('387688', '批量拒收'),
        onClick: () => onOperatesClick('', '', '', '1'),
      }, {
        key: '4',
        disabled,
        icon: <i className="icon-coms-delete" />,
        content: getLabel('83423', '批量退回'),
        onClick: () => onOperatesClick('', '', '', '2'),
      });
    }

    return rightMenuDatas;
  }
  // 获取高级搜索的form表单的处理按钮
  getSearchFormButton() {
    const { recDocManageStore } = this.props;
    const buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@na7hm3@search`} type="primary" onClick={() => recDocManageStore.getTableList()}>{getLabel(388113, '搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@utmksl@reset`} type="ghost" onClick={() => recDocManageStore.searchForm.resetForm()}>{getLabel(2022, '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h8ht59@cancel`} type="ghost" onClick={() => recDocManageStore.setShowSearchAd()}>{getLabel(31129, '取消')}</Button>,
    ];
    return buttons;
  }
  // 获取退回或拒收按钮
  getDealButton() {
    const { recDocManageStore } = this.props;
    let dialogButtons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@82f2dz@cancel`} type="primary" onClick={recDocManageStore.hideReasonDialog} >{getLabel(31129, '取消')}</Button>,
    ];
    if (recDocManageStore.isReject) {
      dialogButtons.unshift(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ha9pc4`} type="primary" onClick={() => this.reasonCheck(recDocManageStore.isReject, recDocManageStore.rejectForm)}>{getLabel(23048, '拒收')}</Button>);
    } else {
      dialogButtons.unshift(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wn92dc`} type="primary" onClick={() => this.reasonCheck(recDocManageStore.isReject, recDocManageStore.returnForm)}>{getLabel(129829, '退回')}</Button>);
    }
    return dialogButtons;
  }


  render() {
    const { recDocManageStore } = this.props;
    // 为了让基本搜索框的输入值和高级搜索框的值同步
    const documentTitle = recDocManageStore.searchForm.getFormParams().documentTitle;
    return (
      <div className="receiveDocManage">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@9hl4vf`} datas={this.getRightMenu()}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ruevv3`}
            title={getLabel(387593, '收文管理')}
            icon={<i className="icon-coms-shouwen" />}
            iconBgcolor="#f93d3d"
            buttons={(recDocManageStore.selectedKey != '0' && []) || this.getBatchButton()}
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7jibel`}
              datas={recDocManageStore.topTab}
              keyParam="viewcondition"
              selectedKey={recDocManageStore.selectedKey}
              onChange={v => recDocManageStore.changeTab(v)}
              searchType={['base', 'advanced']}
              showSearchAd={recDocManageStore.showSearchAd}
              setShowSearchAd={recDocManageStore.setShowSearchAd}
              searchsAd={this.getSearchForm()}
              buttonsAd={this.getSearchFormButton()}
              advanceHeight={120}
              onSearch={value => recDocManageStore.getTableList(value)}
              searchsBaseValue={documentTitle}
              onSearchChange={(v) => {
                recDocManageStore.searchForm.updateFields({ documentTitle: { value: v } }, false);
              }}
            />
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@4wlrpk`}
              needScroll={true}
              comsWeaTableStore={recDocManageStore.tableStore}
              getColumns={this.getColumns}
              rowSelection={{
                selectedRowKeys: recDocManageStore.selectedRowKeys,
                onChange: recDocManageStore.onRowSelect,
              }}
              onOperatesClick={recDocManageStore.onOperatesClick}
            />
          </WeaTop>
        </WeaRightMenu>
        {/* 拒收公文或者退回公文的弹窗 */}
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@60rehz`}
          title={recDocManageStore.isReject == true && getLabel(388089, '拒收公文') || recDocManageStore.isReject == false && getLabel(388090, '退回公文')}
          onCancel={() => recDocManageStore.hideReasonDialog()}
          visible={recDocManageStore.showReasonDialog}
          style={{ width: 750, height: '212px' }}
          maskClosable={true}
          icon="icon-coms-official"
          buttons={this.getDealButton()}
          className="recDocManage_rejectReason"
        >
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@gz52fo`} ref="scroll" className="rejectReason">
            {recDocManageStore.isReject == true && recDocManageStore.rejectForm.render({ needTigger: false })}
            {recDocManageStore.isReject == false && recDocManageStore.returnForm.render({ needTigger: false })}
          </WeaNewScroll>
        </WeaDialog>
        {/* 公文详情 */}
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@f16nvv`}
          title={getLabel(388114, '查看公文')}
          onCancel={() => recDocManageStore.showDocInfoDialog()}
          visible={recDocManageStore.showDocInfo}
          style={{ width: 800, height: 570 }}
          maskClosable={true}
          icon="icon-coms-official"
          buttons={this.getcheckDocInfoButton()}
        >
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@o9lzr1`} ref="scroll" className="newPostDocDialogForm" width={750} height={570}>
            <SendFormComponent ecId={`${this && this.props && this.props.ecId || ''}_SendFormComponent@kvmm2b`} id={recDocManageStore.documentId} groupid={recDocManageStore.groupid} />
          </WeaNewScroll>
        </WeaDialog>
      </div>
    );
  }

  reasonCheck(isReject, form) {
    const { recDocManageStore } = this.props;
    form.validateForm().then((data) => {
      if (data.isValid) {
        if (isReject) {
          recDocManageStore.doReject();
        } else {
          recDocManageStore.doReturn();
        }
      } else {
        data.showErrors();
      }
    });
  }
}
